<template>
  <view class="page page-detail-content">
    <SearchBar ref="searchBar" class="page-header" />
    <view class="content">
      <uni-list>
        <uni-list-item
          v-for="(item,index) in list"
          :key="index"
          :title="item.name"
          clickable
          @click="checkItem(item)"
        >
          <template slot="footer">
            <checkbox :value="item.id" :checked="item.checked" />
          </template>
        </uni-list-item>
      </uni-list>
    </view>
    <view class="page-footer">
      <button class="btn-primary" @click="submit">确定</button>
    </view>
  </view>
</template>

<script>
import SearchBar from '@/components/searchBar';

export default {
  components: {
    SearchBar
  },
  props: {
    query: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      list: [
        { name: '物资名称1', id: '101' },
        { name: '物资名称2', type: '102' },
        { name: '物资名称3', type: '103' },
        { name: '物资名称4', type: '104' },
        { name: '物资名称5', type: '105' },
        { name: '物资名称6', type: '106' },
      ],
    }
  },
  methods: {
    checkItem(row) {
      console.log(row.checked)
      this.$set(row, 'checked', !row.checked);
    },
    submit() {
      let arr = this.list.filter(t => t.checked);
      this.$emit('submit', arr)
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow-y: auto;
  }
  .page-footer {
    padding: 32rpx;
  }
}
</style>